

<template>
  <nut-input :placeholder="placeholder" readonly @click="open" v-model="val" />
  <nut-popup v-model:visible="show" position="bottom">
    <nut-date-picker
        v-model="dateval"
        :three-dimensional="false"
        :min-date="min"
        :max-date="max"
        @confirm="confirmDate"
    ></nut-date-picker>
  </nut-popup>
</template>
<script setup>
import {ref} from "vue";
import tool from "@/utils/tool.js";
const props = defineProps({
  placeholder: {type: String, default: '选择日期'},
})
const min = new Date(2024, 0, 1)
const max = new Date(2030, 10, 1)

const val = defineModel()
const dateval = ref()
const show = ref(false)
const confirmDate = ({selectedValue}) => {
  val.value = selectedValue[0] + '-' + selectedValue[1] + '-' + selectedValue[2]
  show.value = false
}
const open = () => {
  if(val.value) {
    let arr = val.value.split('-')
    if(arr.length === 3) {
      dateval.value = new Date(arr[0],tool.xe.toNumber(arr[1])-1,arr[2])
    }
  }
  show.value = true
}

defineExpose({open})


</script>
<style scoped lang="scss">

</style>